const path = require('path')
const webpack = require("webpack")
const htmlWebpackPlugin = require("html-webpack-plugin")
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//这个配置文件，其实就是一个js文件，通过 node 中的模块操作，向外暴露了一个配置对象
module.exports = {
    mode: 'development',
    //在配置文件中，需要手动定义 入口 和 出口
    entry: path.join(__dirname,'./src/index.js'),//入口，要使用 webpack 打包哪个文件
    output:{
        path:path.join(__dirname,'./dist'),//指定打包好的文件，输出到哪个目录中去
        filename:'index.js',//这是指定 输出文件的名称
    },
    devServer: {
        // --open --port 8888 --contentBase src --hot
        open:true,
        port:8080,
        contentBase:'src',
        hot:true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({
            title:"webpack4使用plugin",
            template: path.resolve(__dirname,"index.html"),
            filename: "index.html"
        }),
        new VueLoaderPlugin()],
    module: {// 用于配置所有第三方模块加载器
        rules: [//处理规则
            //配置处理.css样式文件的第三方loader规则
            {test : /\.css$/, use: ['style-loader','css-loader']},
            //配置处理.less 文件的第三方loader规则
            {test:/\.less$/, use:['style-loader','css-loader','less-loader']},
            //配置处理 .scss 文件的第三方loader规则
            {test:/\.scss$/, use: ['style-loader','css-loader','sass-loader']},
            //配置处理 图片文件的第三方loader规则
            {test: /\.(jpg|png|gif|bmp|jpeg)$/,
                use: 'url-loader?limit=106,224&name=[hash:9]-[name].[exct]'},
        //    limit 给定的值，是图片大小，单位是 byte，如果我们引用的图片大于或者等于给定的limit值，
        //    则不会被转成base64格式的字符串，如果图片小于给定的limit值，则会被转成base64的字符串
            {test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/},
            {test: /\.vue$/, use: ['vue-loader']},//配置.vue文件
            {test: /\.styl(us)?$/, use: ['style-loader','css-loader','stylus-loader']},
        //    处理svg
            {test: /\.(png|gif|svg)$/, use: ['file-loader']}
        ]
    },
    resolve: {
        alias: {//修改 vue 导入时候的路径
            // "vue$":"vue/dist/vue.js"
            '@':path.resolve(__dirname,'src'),
            'styles':path.resolve(__dirname,'src/assets/styles'),
            'images':path.resolve(__dirname,'src/assets/images'),
        }
    }
}
